<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>life cycle</title>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 银日 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入 bable ,用于 Jsx 转为 Js -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <style>
        .list{
            width: 200px;
            height: 200px;
            background-color: beige;
            overflow: auto;  /* 滚动条 */
        }
        .news{
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
</body>

<script type="text/babel">
    class Count extends React.Component{

        // state = {count:0}
        // 构造器：一般情况下构造器可以省略不写
        constructor(props) {
            console.log('Count-constructor')
            super(props);
            this.state = {count:0}
        }
        // 如果涉及到state值任何时候都是取决于props时可以使用
        static getDerivedStateFromProps(props,state){
            console.log('getDerivedStateFromProps',props,state)
            return null
        }
        // 组件挂在完毕时执行
        componentDidMount(){
            console.log('Count-componentDidMount')
        }
        // 控制组件更新的返回是否为真 setState()
        shouldComponentUpdate(){
            console.log('Count-shouldComponentUpdate')
            return true
        }
        // 在组件发生更改之前捕获一次DOM信息传给componentDidUpdate
        getSnapshotBeforeUpdate(){
            console.log('getSnapshotBeforeUpdate')
            return null
        }

        // 组件更新完毕后执行
        componentDidUpdate(preProps,preState,snapshotValue){
            console.log('componentDidUpdate',preProps,preState,snapshotValue)
        }



        // 更新组件
        add = () =>{
            const {count} = this.state
            this.setState({count: count + 1})
        }
        // 强制更新按钮回调
        force = () => {
            this.forceUpdate()
        }
        render(){
            console.log('Count-render')
            const {count} = this.state
            return(
                <div>
                    <h2>当前求和：{count}</h2>
                    <button onClick={this.add}>加1</button>
                    <button onClick={this.force}>不改数据，强制更新</button>
                </div>
            )
        }
    }
    // ReactDOM.render(<Count count={99}/>,document.getElementById('test2'))

</script>
<script type="text/babel">
    class NewList extends React.Component{

        state = {newsArr:[]}

        componentDidMount(){
            setInterval(() => {
                const { newsArr}= this.state
                const news = "新闻" + (newsArr.length + 1)
                this.setState({newsArr: [news, ...newsArr]})
            },1000)
        }

        getSnapshotBeforeUpdate(){
            return this.refs.list.scrollHeight
        }

        componentDidUpdate(proProps,proState,height){
            this.refs.list.scrollTop += this.refs.list.scrollHeight - height
        }

        render(){
            return (
                <div ref="list" className="list">
                    {
                        this.state.newsArr.map((value,index) => {
                            return <div key={index} className='news'>{value}</div>
                        })
                    }
                </div>
            )
        }
    }
    ReactDOM.render(<NewList/>,document.getElementById('test3'))
</script>

</html>